<script setup lang="ts">
import { CheckCircleTwoTone, ExclamationCircleTwoTone } from '@ant-design/icons-vue'
import { ref, watch } from 'vue'

const props = withDefaults(
  defineProps<{
    visible: boolean
    countdown?: number
    title?: string
    type?: 'success' | 'warn'
  }>(),
  {
    visible: false,
    countdown: 5,
    title: '任务创建成功',
    type: 'success',
  },
)

const emit = defineEmits(['update:visible'])

const countDown = ref(0)

let timer: NodeJS.Timeout

watch(
  () => props.visible,
  () => {
    if (props.visible) {
      countDown.value = props.countdown
      timer = setInterval(() => {
        countDown.value -= 1
        if (countDown.value === 0) {
          clearTimeout(timer)
          emit('update:visible', false)
        }
      }, 1000)
    }
  },
)
</script>

<template>
  <a-modal :open="visible" :closable="false">
    <template #footer>
      <a-button type="primary" @click="$emit('update:visible')">
        {{ $t('common.close') }}
      </a-button>
    </template>
    <a-row>
      <a-col>
        <a-space>
          <CheckCircleTwoTone v-if="type === 'success'" two-tone-color="#52c41a" style="font-size: 25px" />
          <ExclamationCircleTwoTone v-else two-tone-color="#EE9C07" style="font-size: 25px" />
          <span style="font-size: 16px">{{ title }}</span>
        </a-space>
      </a-col>
    </a-row>
    <a-row style="margin: 5% 7%; font-size: 16px">
      <router-link :to="{ path: '/vulnerability/tasks/tasks-list' }">
        {{ $t('vul.sentence.clickToList') }}
      </router-link>
    </a-row>
    <a-row style="margin-left: 7%">
      <p>{{ $t('vul.sentence.countDown', [countDown]) }}</p>
    </a-row>
  </a-modal>
</template>

<style scoped></style>
